<template>
  <view :class="themeName">
    <navbar title="订单详情"></navbar>
    <view class="order-detail">
      <!-- Order Status -->
      <view class="order-status">
        <!-- 待支付 -->
        <template v-if="!orderInfo.order_status">
          <view class="order-status-name">{{ orderAction["name"] }}</view>
          <view class="order-status-desc" v-if="showCountDown">
            <text class="m-r-10">支付剩余</text>
            <u-count-down
              :timestamp="
                getCountDownSegment(orderInfo.cancel_unpaid_orders_time)
              "
              :show-days="false"
              :show-hours="false"
              :font-size="26"
              :separator-size="26"
              color="#FFFFFF"
              separator-color="#FFFFFF"
              bg-color="unset"
              separator="zh"
              @end="showCountDown = false"
            />
            <text class="m-l-10">自动关闭</text>
          </view>
        </template>
        <!-- 订单状态【快递配送】 -->
        <template v-else-if="orderInfo.delivery_type !== 2">
          <view class="order-status-name">{{ orderAction["name"] }}</view>
          <template v-if="orderAction['desc']">
            <view class="order-status-desc">{{ orderAction["desc"] }}</view>
          </template>
        </template>
        <!-- 订单状态【门店自提】 -->
        <template v-else-if="orderInfo.delivery_type === 2">
          <view class="order-status-name">{{
            selffetchStatus[orderInfo.order_status]["name"]
          }}</view>
          <template v-if="selffetchStatus[orderInfo.order_status]['desc']">
            <view class="order-status-desc">{{
              selffetchStatus[orderInfo.order_status]["desc"]
            }}</view>
          </template>
        </template>
      </view>

      <!-- Address -->
      <view class="delivery">
        <!-- 快递配送 -->
        <template v-if="orderInfo.delivery_type == 1">
          <address-card :has-content="true" border-radius="7px">
            <template slot="header">
              <text>{{ addressInfo.contact }}</text>
              <text class="m-l-10">{{ addressInfo.mobile }}</text>
            </template>
            <template slot="main">
              <text>{{ addressInfo.province }}</text>
              <text class="m-l-10">{{ addressInfo.city }}</text>
              <text class="m-l-10">{{ addressInfo.district }}</text>
              <text class="m-l-10">{{ addressInfo.address }}</text>
            </template>
          </address-card>
        </template>

        <!-- 门店自提 -->
        <template v-if="orderInfo.delivery_type === 2">
          <address-card
            :has-content="true"
            placeholder="请选择门店地址"
            border-radius="7px"
          >
            <template slot="header">
              <text>{{ orderInfo.selffetch_shop.name }}</text>
            </template>
            <template slot="main">
              <text>{{ orderInfo.selffetch_shop.detailed_address }}</text>
            </template>
            <template slot="footer">
              <text>
                <text>营业时间：</text>
                <text>{{ orderInfo.selffetch_shop.business_start_time }}</text>
                <text>-</text>
                <text>{{ orderInfo.selffetch_shop.business_end_time }}</text>
              </text>
            </template>
          </address-card>
        </template>
      </view>

      <!-- 提货码QR -->
      <view v-if="orderInfo.delivery_type == 2" class="contain receive">
        <view v-if="orderInfo.verification_status" class="delivery--die">
          <u-image
            src="/static/images/delivery_die.png"
            width="134"
            height="98"
            mode="scaleFill"
          />
        </view>

        <template v-if="orderInfo.pickup_code && orderInfo.show_pickup_code">
          <view class="receive-qr" v-if="orderInfo.order_status == 1">
            <text class="xs lighter">请凭二维码取货</text>
            <view
              class="m-t-20 qr-contain"
              :class="{ 'qr-contain--die': orderInfo.verification_status }"
            >
              <tki-qrcode
                ref="qrcode"
                uni="px"
                :val="orderInfo.pickup_code"
                :size="118 * 2"
                :showLoading="false"
              />
            </view>
            <view class="m-t-30 xs black qr-code"
              >提货码：{{ orderInfo.pickup_code }}</view
            >
          </view>
        </template>

        <view class="nr receive-info">
          <view class="receive-info-item">
            <text class="normal">提货人</text>
            <text class="black">{{ addressInfo.contact }}</text>
          </view>
          <view class="receive-info-item">
            <text class="normal">联系方式</text>
            <text class="black">{{ addressInfo.mobile }}</text>
          </view>
        </view>
      </view>

      <!-- 拼团状态 -->
      <template v-if="OrderTypeEnum['TEAM'] === orderInfo.order_type">
        <view class="contain flex row-between p-20 nr">
          <text>拼团状态</text>
          <text :style="{ color: themeColor }">{{
            teamStatus[orderInfo.is_team_success]
          }}</text>
        </view>
      </template>

      <!-- 商品 -->
      <view class="contain order-goods">
        <view v-for="(goodsItem, goodsIndex) in goodsList" :key="goodsIndex">
          <goods-card
            :key="goodsIndex"
            shape="rectangle"
            :name="goodsItem.goods_name"
            :image="goodsItem.goods_image"
            :contain-style="{ height: '230rpx' }"
            :image-style="{ width: '180rpx', height: '180rpx' }"
            @tap="goGoodsDetail(goodsItem.goods_id)"
          >
            <view class="flex-1" slot="default">
              <text class="muted xs m-t-10 skuline">{{
                goodsItem.spec_value_str
              }}</text>
              <view class="m-t-10 flex row-between">
                <view class="flex col-center">
                  <price
                    v-if="
                      orderInfo.order_type == 0 || orderInfo.order_type == 4
                    "
                    :content="goodsItem.original_price"
                    mainSize="32rpx"
                    minorSize="24rpx"
                  />
                  <price
                    v-else
                    :content="goodsItem.goods_price"
                    mainSize="32rpx"
                    minorSize="24rpx"
                  />
                  <view
                    class="vip-price flex m-l-10"
                    v-if="goodsItem.member_price != 0"
                  >
                    <view class="price-name xxs">会员价</view>
                    <view style="padding: 0 10rpx">
                      <price
                        :content="goodsItem.member_price"
                        :weight="500"
                        color="#7B3200"
                      >
                      </price>
                    </view>
                  </view>
                </view>
                <text class="lighter sm">x{{ goodsItem.goods_num }}</text>
              </view>
            </view>
          </goods-card>
          <!-- 售后 -->
          <view class="order-goods__handle" v-if="goodsItem.after_sale_btn">
            <!-- 申请售后 -->
            <template v-if="goodsItem.after_sale_btn === 1">
              <view
                class="order-goods__handle-button"
                @tap="
                  goAfterSale(
                    afterSaleStatus[goodsItem.after_sale_btn]['href'],
                    goodsItem.id
                  )
                "
              >
                {{ afterSaleStatus[goodsItem.after_sale_btn]["name"] }}
              </view>
            </template>
            <!-- 售后中 | 售后成功 | 售后失败 -->
            <template v-else>
              <view
                class="order-goods__handle-button"
                @tap="
                  goAfterSale(
                    afterSaleStatus[goodsItem.after_sale_btn]['href'],
                    goodsItem.after_sale_id
                  )
                "
              >
                {{ afterSaleStatus[goodsItem.after_sale_btn]["name"] }}
              </view>
            </template>
          </view>
        </view>
      </view>
      <!-- 虚拟发货内容 -->
      <template v-if="orderInfo.delivery_content">
        <view
          class="order-info contain"
          @click="handleCopy(orderInfo.delivery_content)"
        >
          <view class="item">
            <view class="black" style="word-break: break-all">{{
              orderInfo.delivery_content
            }}</view>
            <view class="flex row-right m-t-30">
              <view class="copy-btn">复制</view>
            </view>
          </view>
        </view>
      </template>
      <!-- 账单 -->
      <view class="contain order-bill">
        <view class="cell order-bill__item">
          <view class="cell-label">商品金额</view>
          <view class="cell-content">
            <price
              v-if="orderInfo.order_type == 0 || orderInfo.order_type == 4"
              :content="orderInfo.total_original_price"
            />
            <price v-else :content="orderInfo.goods_price" />
          </view>
        </view>
        <view class="cell order-bill__item">
          <view class="cell-label">运费</view>
          <view class="cell-content">
            <price :content="orderInfo.express_price" />
          </view>
        </view>
        <view
          class="cell order-bill__item"
          v-if="orderInfo.discount_amount * 1"
        >
          <view class="cell-label">优惠券</view>
          <view class="cell-content">
            <price
              :content="orderInfo.discount_amount"
              :color="themeColor"
              prefix="-￥"
            />
          </view>
        </view>
        <view class="cell order-bill__item" v-if="orderInfo.member_amount * 1">
          <view class="cell-label">会员折扣</view>
          <view class="cell-content">
            <price
              :content="orderInfo.member_amount"
              :color="themeColor"
              prefix="-￥"
            />
          </view>
        </view>
        <view class="cell order-bill__item" v-if="orderInfo.change_price * 1">
          <view class="cell-label">商品改价</view>
          <view class="cell-content">
            <price
              :content="orderInfo.change_price"
              :color="themeColor"
              prefix="￥"
            />
          </view>
        </view>
        <view class="cell order-bill__item">
          <view class="cell-content">
            <text class="muted m-r-10">实付款:</text>
            <price
              :content="orderInfo.order_amount"
              mainSize="32rpx"
              minorSize="24rpx"
              :color="themeColor"
            />
          </view>
        </view>
      </view>

      <!-- 留言 -->
      <view v-if="orderInfo.user_remark" class="contain cell remark">
        <view class="cell-label">买家留言</view>
        <view class="cell-content muted" style="word-break: break-all">{{
          orderInfo.user_remark
        }}</view>
      </view>

      <!-- 订单信息 -->
      <view class="contain order-info">
        <view class="cell order-info__item">
          <view class="cell-label">订单编号</view>
          <view class="cell-content">
            <view class="flex-1">{{ orderInfo.sn }}</view>
            <view class="button--copy" @tap="handleCopy(orderInfo.sn)"
              >复制</view
            >
          </view>
        </view>
        <view class="cell order-info__item">
          <view class="cell-label">订单类型</view>
          <view class="cell-content">{{ orderInfo.order_type_desc }}</view>
        </view>
        <view class="cell order-info__item">
          <view class="cell-label">支付方式</view>
          <view class="cell-content">{{
            getPaywayName(orderInfo.pay_way)
          }}</view>
        </view>
        <view class="cell order-info__item">
          <view class="cell-label">下单时间</view>
          <view class="cell-content">{{ orderInfo.create_time }}</view>
        </view>
        <view v-if="orderInfo.pay_time" class="cell order-info__item">
          <view class="cell-label">付款时间</view>
          <view class="cell-content">{{ orderInfo.pay_time }}</view>
        </view>
        <view v-if="orderInfo.express_time" class="cell order-info__item">
          <view class="cell-label">发货时间</view>
          <view class="cell-content">{{ orderInfo.express_time }}</view>
        </view>
        <view v-if="orderInfo.confirm_take_time" class="cell order-info__item">
          <view class="cell-label">成交时间</view>
          <view class="cell-content">{{ orderInfo.confirm_take_time }}</view>
        </view>
      </view>

      <!-- Order Operational -->
      <view v-if="orderButtons.length" class="operational">
        <block v-for="buttonItem in orderButtons" :key="buttonItem.event">
          <view
            :class="['order-button', `order-button--${buttonItem.style}`]"
            @tap="
              onOrderButtons(
                buttonItem['event'],
                orderInfo.id,
                orderInfo.pay_way
              )
            "
            >{{ buttonItem.name }}</view
          >
        </block>
      </view>

      <!-- 页面状态 -->
      <page-status :status="pageStatus">
        <template #error>
          <u-empty
            text="订单异常"
            src="/static/images/empty/order.png"
            :icon-size="280"
          ></u-empty>
        </template>
      </page-status>
    </view>
  </view>
</template>

<script>
import { apiOrderDetail } from "@/api/order";
import OrderMixin from "@/mixins/order";
import { copy } from "@/utils/tools";
import { PageStatusEnum, PaymentStatusEnum, OrderTypeEnum } from "@/utils/enum";

export default {
  name: "OrderDetail",
  mixins: [OrderMixin],

  data() {
    return {
      // 页面状态
      pageStatus: PageStatusEnum["LOADING"],
      order_id: "", // 订单ID
      orderInfo: {}, // 订单信息
      goodsList: [], // 商品列表
      addressInfo: {}, // 地址信息

      orderButtons: [], // 订单按钮组

      showCountDown: true, // 显示倒计时

      // 订单状态
      orderStatus: {
        0: {
          name: "等待买家付款",
        },
        1: {
          name: "等待商家发货",
          desc: "您的商品正在打包中，请耐心等待…",
        },
        2: {
          name: "待收货",
          desc: "您的商品正在路中，请耐心等待…",
        },
        3: {
          name: "已完成",
          desc: "商品已签收，期待再次购买！",
        },
        4: {
          name: "订单已关闭",
          desc: "",
        },
      },

      // 订单状态【自提门店】
      selffetchStatus: {
        1: {
          name: "待取货",
          desc: "请前往指定门店取货",
        },
        3: {
          name: "已完成",
          desc: "交易已完成，感谢您的购买！",
        },
        4: {
          name: "订单已关闭",
          desc: "",
        },
      },

      // 售后状态
      afterSaleStatus: {
        1: {
          name: "申请售后",
          href: "/bundle/pages/post_after_sale/post_after_sale",
        },
        2: {
          name: "售后中",
          href: "/bundle/pages/after_sale_detail/after_sale_detail",
        },
        3: {
          name: "售后成功",
          href: "/bundle/pages/after_sale_detail/after_sale_detail",
        },
        4: {
          name: "售后失败",
          href: "/bundle/pages/after_sale_detail/after_sale_detail",
        },
      },

      // 拼团状态
      teamStatus: {
        0: "拼团中",
        1: "拼团成功",
        2: "拼团失败",
      },
    };
  },

  computed: {
    OrderTypeEnum: () => OrderTypeEnum,
    orderAction() {
      return this.orderStatus[this.orderInfo.order_status] || {};
    },
  },

  methods: {
    handleCopy: copy,
    // 刷新订单数据
    refreshOrderData() {
      return apiOrderDetail({
        id: this.order_id,
      })
        .then((data) => {
          this.orderInfo = data;
          this.addressInfo = data.address;
          this.goodsList = data.order_goods;
          this.orderButtons = this.getOrderStatusButtons(data.btn) ?? [];
          return Promise.resolve(data);
        })
        .then((data) => {
          if (data.delivery_type === 2) {
            // 提货码
            this.$nextTick(function () {
              const refQR = this.$refs["qrcode"];
              refQR._makeCode();
            });
          }
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },

    // 获取支付方式名称
    getPaywayName(payway) {
      switch (payway) {
        case 1:
          return "余额支付";
        case 2:
          return "微信支付";
        case 3:
          return "支付宝支付";
      }
    },

    // 获取倒计时段
    getCountDownSegment(endTimestamp) {
      const startTimestamp = new Date().getTime() / 1000;
      if (endTimestamp - startTimestamp <= 0) this.showCountDown = false;
      return endTimestamp - startTimestamp;
    },

    // 去商品详情
    goGoodsDetail(goods_id) {
      this.$Router.push({
        path: "/pages/goods_detail/goods_detail",
        query: { id: goods_id },
      });
    },

    // 去售后
    goAfterSale(href, id) {
      this.$Router.push({
        path: href,
        query: { id },
      });
    },
  },

  async onLoad() {
    const options = this.$Route.query;
    if (!this.isLogin) return this.$Router.replace("/pages/login/login");

    try {
      if (!options.order_id) throw new Error("订单异常");
      this.order_id = options.order_id;
      await this.refreshOrderData();
      this.pageStatus = PageStatusEnum["NORMAL"];
    } catch (err) {
      console.log(err);
      // setTimeout(() => {
      // 	this.$Router.back()
      // }, 0.5 * 1000)
      this.pageStatus = PageStatusEnum["ERROR"];
    }

    // 监听全局duringPayment事件
    uni.$on("duringPayment", ({ result }) => {
      if (result === PaymentStatusEnum["SUCCESS"]) {
        this.$Router.back();
        setTimeout(() => {
          this.$toast({ title: "支付成功" });
        }, 0.5 * 1000);
        this.refreshOrderData();
      }
    });
  },

  onUnload() {
    uni.$off("duringPayment");
  },
};
</script>

<style lang="scss" scoped>
.order-detail {
  padding: 0 20rpx calc(100rpx + 20rpx + constant(safe-area-inset-bottom)) 20rpx;
  padding: 0 20rpx calc(100rpx + 20rpx + env(safe-area-inset-bottom)) 20rpx;

  @include background_linear() background-size: 200vw 200rpx;
  background-repeat: no-repeat;

  .contain {
    margin-top: 20rpx;
    border-radius: 7px;
    background-color: #ffffff;
  }

  // 单元格
  .cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $-font-size-nr;

    &-label {
      width: 142rpx;
    }

    &-content {
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
}

.order-status {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 136rpx;
  // @include background_linear()
  color: #ffffff;

  // &::before {
  // 	z-index: 1;
  // 	position: absolute;
  // 	left: -20rpx;
  // 	right: -20rpx;
  // 	display: block;
  // 	content: "";
  // 	width: 100vw;
  // 	height: 200rpx;
  // 	@include background_linear()
  // }

  &-name {
    font-size: $-font-size-lg;
  }

  &-desc {
    font-size: $-font-size-sm;
  }
}

.order-goods {
  &__handle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20rpx 20rpx 20rpx;

    &-button {
      padding: 8rpx 30rpx;
      border: $-solid-border;
      border-radius: 60px;
      font-size: $-font-size-sm;
    }
  }
}

.order-bill {
  padding: 20rpx;

  &__item {
    height: 60rpx;

    .cell-content {
      justify-content: flex-end;
    }
  }
}

.remark {
  padding: 24rpx 20rpx;
  align-items: flex-start !important;
}

.order-info {
  padding: 20rpx;

  &__item {
    height: 60rpx;
  }
  .copy-btn {
    font-size: 24rpx;
    padding: 6rpx 18rpx;
    border-radius: 8rpx;
    @include font_color();
    @include background_color(0.1);
  }
}

.receive {
  position: relative;

  .delivery--die {
    position: absolute;
    top: 0;
    right: 30rpx;
  }

  .receive-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 460rpx;
  }

  .qr-contain {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 140px;
    border: 1px solid #cccccc;
    border-radius: 5px;

    &--die {
      position: relative;

      &::before {
        position: absolute;
        z-index: 99;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        content: "";
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
  }

  .qr-code {
    padding: 8rpx 30rpx;
    border-radius: 60px;
    background-color: #f6f6f6;
  }

  .receive-info {
    padding-left: 20rpx;

    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      padding-right: 30rpx;

      &:nth-child(n + 2) {
        border-top: $-dashed-border;
      }
    }
  }
}

.operational {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100rpx + constant(safe-area-inset-bottom));
  height: calc(100rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20rpx constant(safe-area-inset-bottom) 20rpx;
  padding: 0 20rpx env(safe-area-inset-bottom) 20rpx;
  border-top: $-solid-border;
  background-color: #ffffff;

  .order-button {
    box-sizing: border-box;
    padding: 10rpx 30rpx;
    border-radius: 60px;
    font-size: $-font-size-nr;

    &:nth-child(n + 2) {
      margin-left: 20rpx;
    }

    &--primary {
      @include background_color();
      color: #ffffff;
    }

    &--normal {
      border-width: 1px;
      border-style: solid;
      @include border_color();
      @include font_color();
    }

    &--muted {
      border: $-solid-border;
      color: $-color-lighter;
    }
  }
}

.button--copy {
  padding: 4rpx 20rpx;
  border: $-solid-border;
  border-radius: 60px;
  font-size: $-font-size-xs;
}
.vip-price {
  margin-top: 5rpx;
  background-color: #ffe9ba;
  color: #ffd4b7;
  line-height: 36rpx;
  border-radius: 6rpx;
  overflow: hidden;

  .price-name {
    background-color: #101010;
    padding: 3rpx 12rpx;
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      display: block;
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      right: -15rpx;
      background-color: #ffe9ba;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      box-sizing: border-box;
    }
  }
}
</style>
